<template>
  <div>
    <section class="fun-btn">

      <el-button class="btn"
                 type="primary"
                 size="mini"
                 @click="handleDrawer('查询检索')">查询检索
      </el-button>

      <el-button class="btn"
                 type="primary"
                 @click="handleOpenInventory"
                 :loading="inventoryLoading"
                 size="mini">开放清册
      </el-button>

    </section>

    <section class="list-box">
      <el-table
        :data="tableData"
        border
        v-loading="tableLoading"
        height="calc(100vh - 250px)"
        @selection-change="handleSelectionChange"
        class="table">
        <el-table-column
          align="center"
          type="selection"
          fixed="left"
          width="60">
        </el-table-column>
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="60">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="dh"
          label="档号">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="tm"
          align="left"
          label="题名">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="wh"
          label="文号">
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </section>

    <el-drawer
      :title="setDrawer.title"
      :size="setDrawer.size"
      direction="rtl"
      :visible.sync="drawer"
    >
      <retrieval-search v-if="setDrawer.title === '查询检索'"
                        :loading="queryLoading"
                        :formItems="formItems"
                        @handleSenior="handleSenior">
      </retrieval-search>

    </el-drawer>
  </div>
</template>

<script>
import RetrievalSearch from '../drawer/retrievalSearch'
import { requestOpen, requestOpenInventory, requestQuery } from '../../../../../api/appraisal'

export default {
  name: 'openItem',
  components: { RetrievalSearch },
  props: {
    idCategory: {
      default: ''
    }
  },
  data () {
    return {
      inventoryLoading: false,
      tableLoading: false,
      queryLoading: false,
      drawer: false,
      setDrawer: {
        title: '',
        size: ''
      },
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
      tableData: [],
      tableSelected: [],
      changesData: [],
      formItems: [], // 查询检索的数据
      params: []
    }
  },
  mounted () {
    if (this.idCategory) {
      this.getDataList()
      this.getQueryData()
    }
  },
  watch: {
    idCategory () {
      if (this.idCategory) {
        this.page.pageNo = 1
        this.page.pageSize = 20
        this.getDataList()
        this.getQueryData()
      }
    }
  },
  methods: {
    getQueryData () {
      requestQuery({ idCategory: this.idCategory }).then(res => {
        this.formItems = res.data.data
      })
    },
    getDataList () {
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize
      }

      if (this.params.length > 0) {
        param.params = this.params
      }

      this.tableLoading = true
      requestOpen(param, { idCategory: this.idCategory }).then(res => {
        this.tableData = res.data.data.records
        this.page.total = Number(res.data.data.total)
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },

    handleOpenInventory () {
      // 开放清册
      this.inventoryLoading = true
      requestOpenInventory({ idCategory: this.idCategory }).then(res => {
        this.$message.success('销毁清册操作成功！')
        this.download(res.data)
        this.inventoryLoading = false
      }).catch(() => {
        this.inventoryLoading = false
      })
    },
    download (data) {
      const blob = new Blob([data])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.target = '_blank'
      downloadElement.download = '开放清册.xls' // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href) // 释放掉blob对象
    },

    handleSizeChange (val) {
      this.page.pageSize = val
      this.getDataList()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getDataList()
    },
    handleSelectionChange (selection) {
      // 勾选表格行
      this.tableSelected = selection
    },
    handleAdd () {
      // 创建鉴定项目
      this.dialogAppraisal = true
    },
    handleDrawer (type) {
      const arr = [{
        title: '查询检索',
        size: '650px',
        direction: 'rtl'
      }]

      arr.map(item => {
        if (item.title === type) {
          this.setDrawer = item
        }
      })
      this.drawer = true
    },
    async handleSenior (param) {
      // 检索
      this.queryLoading = true
      this.page.pageNo = 1
      this.page.pageSize = 20
      this.page.total = 0
      this.params = param

      await this.getDataList()

      this.drawer = false
      this.queryLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
